<template>
    <div class="Code">
        <div class="title_bt">
            <div class="bt on" @click="add"><i class="el-icon-caret-bottom"></i>新建代码位</div>
            <div class="bt" :class="multipleSelection.length!=0?'':'hui' " @click="statelist('删除')">删除</div>
            <div class="bt" :class="multipleSelection.length!=0?'':'hui' " @click="statelist('启用')">启用</div>
            <div class="bt" :class="multipleSelection.length!=0?'':'hui' " @click="statelist('停用')">停用</div>
           <div class="bt" @click="search_show=!search_show">筛选 <i :class="search_show?'el-icon-caret-top':'el-icon-caret-bottom' "></i> </div>
             <div class="search">
                <el-input v-model="userForm.name" @change="search()" placeholder="请输入代码位名称"></el-input>
                <div class="button" @click="search()"><i class="el-icon-search"></i></div>
             </div>
        </div>
          <div class="search_show" v-show="search_show">
            <el-row :gutter="20">
                <el-col :xs="12" :sm="6" :lg="3" :xl="3" class="card">
                    <div class="bt">状态：</div>
                    <div class="cardflex1">
                        <el-select v-model="select_state_val" placeholder="请选择状态">
                            <el-option
                                v-for="item in select_state" 
                                @click.native="filterselect('state',item.id)"
                                :key="item.value"  
                                :label="item.value" 
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="6" :lg="4" :xl="3" class="card">
                    <div class="bt">组名：</div>
                    <div class="cardflex1">
                       <el-select v-model="select_codebits_val" filterable placeholder="请选择代码组">
                            <el-option
                                v-for="item in select_codebits" 
                                @click.native="filterselect('codebits',item.id)"
                                :key="item.name"  
                                :label="item.name" 
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                  <el-col :xs="12" :sm="6" :lg="4" :xl="3" class="card">
                    <!-- <el-button type="primary" @click="search">确定</el-button> -->
                     <el-button type="danger" @click="reset">重置</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table  v-loading="loading" :data="tableData" style="width: 100%" class="tablebox"  @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column prop="id"  sortable  label="编号" width="80" align="center" ></el-table-column>
            <el-table-column prop="name" align="center"  label="代码位名称"  > </el-table-column>
            <el-table-column prop="group" align="center"  label="组名"  > </el-table-column>
            <el-table-column  label="尺寸"   align="center"    >
                <template slot-scope="{ row }">
                        {{row.c_width}}*{{row.c_height}}
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" align="center" width="100"  >
               <template slot-scope="{ row }">
                        <el-tag size='mini'
                         :type="row.status=='删除'? 'danger' : row.status=='启用'? 'success' : row.status=='停用'?  'info'  :  '' ">
                          {{row.status}}
                        </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="updated_at" align="center" sortable label="更新时间"   width="200"  ></el-table-column>
             <el-table-column prop="usestatus" label="使用的情况"  align="center" >
                  <template slot-scope="{ row }">
                       <span v-if="row.usestatus=='0'">{{row.usestatus}}个有效广告</span>
                       <a v-else class="linka"  @click="routerlink(row.id)">{{row.usestatus}}个有效广告</a>
                </template>
             </el-table-column>
            <el-table-column class-name="status-col"  label="操作" width="250"  align="center"  fixed="right">
                <template slot-scope="{ row }">
                    <kt-button  size='mini'  label="获取代码" perms="sys:adminlist:edit"  type="warning" @click="handlecode(row)"/>
                    <kt-button  icon="el-icon-edit"  size='mini'  label="修改" perms="sys:adminlist:edit" type="primary" @click="handleUpdate(row)"/>
                    <kt-button icon="el-icon-message"  size='mini' label="报告" perms="sys:adminlist:delete" type="success" @click="handleReport(row.id)"/>
                    <kt-button icon="el-icon-delete"  size='mini' label="删除" perms="sys:adminlist:delete" type="danger" @click="handleDelete(row.id)"/>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pageswarp"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=userForm.page
            :page-size=page_size
            layout="total, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
         <drawer-Code :drawer='code_drawer' :item="code_item" @handleClosecode='handleClosecode'/>    <!--获取代码位得代码  -->
         <drawer-Codefrom v-if="code_drawer2" :drawer='code_drawer2' :item="drawer2_arr" :title="drawer2_title" @handleClose2='handleClose2' @codeUpdate="codeUpdate"/>   <!--新建 和 编辑代码位  -->
         <report type_data="report_code" title="代码位报告" :drawer='drawer_report' :itemcode="report_id" @handleClose_report='handleClose_report'/>   
    </div>
</template>
<script>
import KtButton from "@/components/elbutton"
import drawerCode from "@/components/el_drawer/code.vue"
import drawerCodefrom from "@/components/el_drawer/code_from.vue"
import report from "@/components/el_drawer/report.vue"
import { axios_adsense_get ,axios_adversense,axios_adver_open } from "@/api/infor";
export default {
    name:'Code',
    data(){
        return{
            loading:false,
            page_size:1,
            total:1,
            searchinput:'',  //顶部的搜索栏目
            search_show:true,  //显示搜索盒子
            userForm:{
                page:1,
                status:3,     //搜索下拉框状态
                matter_id:'0',  //搜索下拉框代码组
                name:''   //顶部的搜索栏目
            },
            ad_drawer:false, //代码广告位
            drawer_title:'新建',//新建修改广告位title
            drawer_arr:'',  //新建修改广告位数据
            code_drawer:false, //代码位代码
            code_drawer2:false,//新建修改代码位
            drawer2_title:'新建代码位',//新建修改代码位title
            drawer2_arr:'',  //新建修改代码位数据
            drawer_report:false,   //报告
            report_id:'',//报告数组
            code_item:'', //获取代码的id
            select_state_val:'全部',
            select_state:[
               {value:"全部",id:3},
               {value:"删除",id:0},
               {value:"启用",id:1},
               {value:"停用",id:2}
           ],
            select_codebits_val:'全部',
            select_codebits:[{name:"全部",id:'0'}],
            tableData: [ ], //表格的数据
            multipleSelection: []
        }
    },
    created(){
          this.getdatalist("refresh")
        this.axiosAdversense()
    },
     components:{
        KtButton,
        drawerCode,
        drawerCodefrom,
         report
    },
    methods:{
        // 跳转其他路由
        routerlink(id){
             this.$router.push({ path: "/putIn/ad_putin" ,query:{adsense_id:id} }) .catch(err => {return err});
        },
        search(){
            this.getdatalist("refresh")
        },
         // 下拉框选项搜索
        filterselect(type,e){
            if(type=="state"){this.userForm.status=e}
            if(type=='codebits'){this.userForm.matter_id=e}
             this.getdatalist("refresh")
        },
        // 重置
        reset(){
            this.search_show=true;
            this.select_state_val='全部',
            this.select_material_val='全部',
            this.getdatalist("reset")
        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
             this.userForm.page=val;
             this.getdatalist()
        },
         // 删除代码位
        handleDelete(id){
             this.$confirm('确定要删除此条数据吗？','确认信息',{customClass:'layeralterelbox'}) .then(()  => {
               this.filterdata({ids:[id],status:0},'删除','refresh')
            }).catch(()  => {});
        },
        // 获取代码位报告
         handleReport(id){
            this.report_id=id;
             this.drawer_report=true;
        },
        // 获取代码位代码
        handlecode(item){
            this.code_item=item;
            this.code_drawer=true;
        },
        //关闭代码位代码
         handleClosecode(){
             this.code_drawer=false;
         },
          //关闭代码位
         handleClose2(){
             this.code_drawer2=false;
         },
         codeUpdate(boolean){
            if(boolean){
                this.getdatalist() //修改后更新列表
            }
         },
        //  关闭报告
        handleClose_report(){
             this.drawer_report=false;
         },
        beforehandleCommand(row,child){
            return {'row':row,'child':child}
        },
         handleCommand(command) {
            if(command.child==1){  //操作我的报告
               console.log(command.child) 
                this.drawer_report=true; 
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        add(){
            // this.drawer_title='新建网站'; 
            this.drawer2_title='新建代码位';
            this.drawer2_arr='' 
            this.code_drawer2=true; 
        },
          // 修改用户
          handleUpdate(item){
             this.drawer2_title='修改代码位'; 
             this.code_drawer2=true; 
             this.drawer2_arr=item
        },
        removeDuplicates(arr1, arr2) {
          const uniqueElements = new Set([...arr1, ...arr2]);
        return Array.from(uniqueElements);
        },
        statelist(val){
            let  state=''
            switch (val) {
                case "删除":
                    state =0;
                    break;
                case "启用":
                    state = 1;
                    break;
                case "停用":
                    state = 2;
                    break;
            }
            if(this.multipleSelection.length<1){
                this.$message('请勾选的代码位');
            }else{
                this.$confirm('确定要'+val+'勾选的代码位吗？','确认'+val+'',{customClass:'layeralterelbox'}) .then(()  => {
                    let arrid=[];
                   this.multipleSelection.forEach(row => {
                        let id=row.id
                        arrid.push(id)
                    });
                    this.filterdata({ids:arrid,status:state,type:3},val)
                }).catch(()  => {});
            } 

        },
         //操作列表选项
         filterdata(page,val){
            axios_adver_open(page).then((res) => {
                if(res.data.code==1){
                    this.$message({message:val+'已经操作成功', type: 'success'});
                   this.getdatalist()
                    this.multipleSelection = [];   // 清空选中项
                }
            }).catch((e )=>{
                this.$message({message:e, type: 'warning'});
            })
        },
        // 获取列表数据
        getdatalist(type){
            if(type=="refresh"){
                this.userForm.page=1;
            }
            if(type=="reset"){
                this.userForm={
                    page:1,
                    status:3,     
                    matter_id:'0', 
                    name:'' 
                }
            }
            this.loading=true;
            axios_adsense_get(this.userForm).then((res) => {
                if(res.data.code==1){
                    this.loading=false;
                    this.tableData=res.data.data;
                    this.page_size=res.data.page_size;
                    this.total=Number(res.data.total);
                }
            }).catch(( )=>{})
        },
        // 获取代码组的分类
        axiosAdversense(){
           axios_adversense({model:4,flow_type:'0'}).then((res) => {
                 this.select_codebits.push(res.data.data);
                 this.select_codebits=this.select_codebits.flat(Infinity)
            }).catch(( )=>{})
        },
    }
}
</script>
<style>
.el-table .cell .el-button{padding: 10px 5px;}
.el-table .cell .el-button + .el-button{
  margin-left: 0px;
}
.linka{
    color: blue;
    cursor: pointer;
}
</style>